<template>
  <div :class="['testBox', themeState]">
    {{ themeState }}
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { THEMEKEY } from '../views/symbolKey'
const themeState = inject(THEMEKEY)
</script>

<style scoped lang="scss">
.testBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;

  &.dark {
    background: #000;
    color: #fff;
  }

  &.light {
    background: #fff;
    color: #000;
  }
}
</style>
